https://baike.baidu.com/item/%E8%88%92%E5%B0%94%E7%89%B9%E6%96%B9%E6%A0%BC/5372437?fr=aladdin

<!--遮罩层显示-->
<div id="m_mask" align="center" style="top:0%; left:0%; padding:16px; border:3px solid orange; background-color:wheat;position:absolute;z-index:1002; overflow:auto; max-width: 100%;height:100%;display: block;">
    <div style="font-size: 30px;flood-color: black;word-wrap:break-word;word-break:break-all;overflow:hidden">
        <p style="font-size: 35px;flood-color: red;" align="center">使用说明： </p>
        <br />
        <p >1：舒尔特表格：此表格是一个5*5的表格，请依次将1-25个数字排序找出。使用时间最少即右脑开发越多。</p>
        <p>2：每天任务：每天练习1到5次。</p>
        <a href="javascript:void(0)" id="closebt" style="flood-color: blue;" >确定 </a>
    </div>
</div>
<div id="i_show" style="display: none;">
    <div style="height: 50px;border-radius:100px;font-size:1rem;">
        <p align="center" style="color:red;font-weight:bold;font-size:26px">
            点击计时按钮后依次点击1-25
        </p>
    </div>
    <!--表格显示    -->
    <div style="max-width: 100%;height:350px;display: block;background-size: contain;">
        <input id="shulte_text" type="hidden" value="1" />
        <div class="slide" id="shulte" align="center">
        </div>
    </div>
    <div style="height: 50px;"></div>
    <!--时间显示    -->
    <div id="firstDiv">
        <div id="twoDiv" align="center" >
            <span style="font-size: 20px;"><span id="hour">00 </span>时</span>
            <span style="font-size: 20px;"><span id="minute">00 </span>分</span>
            <span style="font-size: 20px;"><span id="second">00 </span>秒</span>
            <span style="font-size: 20px;"><span id="ms">00 </span>毫秒</span>
            <button id="start" onclick="startTime()" style="font-size: 20px;">开始计时</button>
            <input id="button_count" type="hidden" value="-1" />
        </div>
    </div>

<script type="text/javascript">
    //定义数组的截至数字
    var number = 25;//数组25个数字
    var array=new Array(number);//数组定义
    var count = 0;//时间秒数记录
    //页面加载执行
    $(document).ready(function (){
        $("#m_mask").hide();//显示遮罩层
        $("#i_show").show();
        //点击确定，隐藏遮罩层。
        closebt.onclick=function(){
            $("#m_mask").hide();
            $("#i_show").show();
        }
        showDiffGroup(5, 1, number);
    });
    //二维数组
    function getDiffGroup(num, min, max) {
        var res = [];
        for (var i = min; i <= max; i++){ //从最小数开始 加一 到最大数
            res.push(i);//将所有的数 push到数组中
        }
        res.sort(function () {
            return 0.5 - Math.random(); //随机数排序
        });
        var rst = [];
        for (var i = 0; i < res.length; i += num){
            rst.push(res.slice(i, i + num));//数组中放入截取后的数组
        }
        return rst;
    }
    //调用二维数组，拼接到页面
    function showDiffGroup(num, min, max){
        var rsts = getDiffGroup(5, 1, max);//5*5二维数组
        array = rsts;
        console.log(rsts.join('\n'));
        //将二维数组放入页面
        //var div = document.getElementById('div1');
        //拼接table
        var str ="<table border='1' width='350' height='350' cellspacing='0' cellpadding='0' bgcolor='#FFA500'>";
        // 循环遍历二维数组
        for(var i = 0;i<rsts.length;i++){//循环最外面的数组
            str+="<tr>";
            for(var j = 0;j<rsts[i].length;j++){//循环里面的数组
                str+= "<td align='center' id='td"+i+j+"' name='"+(i+''+j)+"' onClick = 'td_click("+(i+''+j)+")' value='"+rsts[i][j]+"'>"+rsts[i][j]+"</td>";//拼接<td>
            }
            str+="</tr>";
        }
        str+="</table>";
        //将table添加到div中
        //div.innerHTML = str;
        $("#shulte").append(str);
    }
    //在二维数组中查找数字 - 二维数组的下标
    function findNumber(target, array){
        //循环遍历查找下标
        for(var i=0;i<array.length;i++){
            for(var j=0;j<array[0].length;j++){
                if(array[i][j] == target){
                    return i+""+j;//查找到后返回下标
                }
            }
        }
        return 0;//没查找到返回0
    }
    //表格点击事件
    function td_click(td_flag){
        //点击表格时，判断是否已经点击计时按钮，若未点击，自动计时
        var i = $("#button_count").val();
        if(i<0){//未点击
            startTime();//自动计时
        }
        var flag = 0;//数组下标
        //循环遍历，查找数组的下标
        for(var i=1;i<=number;i++){
            var flag =findNumber(i,array);//数字从1-25开始查找。
            if(td_flag == flag){
                break;
            }
        }
        //获取点击数字的值。
        var td_val =$("#td"+flag).text();
        //获取点击次数
        var num=$("#shulte_text").val();
        //判断点击次数是否比显示的个数少。
        if(num<=number){
            //判断点击的数字为点击的次数，则正常排序，否则，排序错误，提示。
            if(td_val == num){
                num++;
                if(num>number){//点击数字完毕,触发暂停事件
                    $("#button_count").attr("value",1);//页面数字是基数
                    startTime();//暂停时间
                    //显示使用的时间
                    var hour = $("#hour").text();
                    var minute = $("#minute").text();
                    var second = $("#second").text();
                    var ms = $("#ms").text();
                    alert("您用时："+hour+"时"+minute+"分"+second+"秒"+ms+"毫秒");

                    $("#hour").html("00");
                    $("#minute").html("00");
                    $("#second").html("00");
                    $("#ms").html("00");
                    $("#start").html("开始计时");
                    count=0;//将时间秒数重新设置为0
                    $("#shulte_text").attr("value",1);//点击次数设置为1
                    $("#button_count").attr("value",-1);//计时时间设置为偶数
                    $("#shulte").empty(); //将舒尔特表的div清空
                    showDiffGroup(5, 1, number);//重新生成5*5舒尔特表
                }else{//1-25 点击次数赋值
                    $("#shulte_text").attr("value",num);//推荐这种写法,可正常赋值
                }

            }else{
                alert("请点击："+num);
            }
        }
    }

    //拼接时间
    var intervalId;
    function startTime() {
        var i = $("#button_count").val();
        if(i<0){
            i = 0;
        }
        var hour = document.getElementById("hour");
        var minute = document.getElementById("minute");
        var second = document.getElementById("second");
        var ms = document.getElementById("ms");
        var buttonEle = document.getElementById("start");
        console.log(count);

        if(i % 2 == 0) {
            buttonEle.innerHTML = "暂停计时";
            intervalId = setInterval(function() {
                count += 1;
                var thehour = parseInt(count / 360000);
                var theminute = parseInt(count / 6000 % 60);
                var thesecond = parseInt(count / 100 % 60);
                var thems = parseInt(count % 100);

                if(thehour >= 10) {
                    hour.innerHTML = thehour + " ";
                } else {
                    hour.innerHTML = "0" + thehour + " ";
                }

                if(theminute >= 10) {
                    minute.innerHTML = theminute + " ";
                } else {
                    minute.innerHTML = "0" + theminute + " ";
                }

                if(thesecond >= 10) {
                    second.innerHTML = thesecond + " ";
                } else {
                    second.innerHTML = "0" + thesecond + "  ";
                }
                if(thems >= 10) {
                    ms.innerHTML = thems + "&nbsp;";
                } else {
                    ms.innerHTML = "0" + thems + "&nbsp;";
                }
            }, 10)
        } else {
            buttonEle.innerHTML = "计时继续";
            clearInterval(intervalId);
        }
        $("#button_count").attr("value",++i);//页面数字自加1
    }
</script>
